<div *ngIf="stepExecutionDetails$ | async as stepExecutionDetails; else loading">

  <div class="heading">
    <div class="description">
      <h1>
        Step Execution Progress <strong>{{ stepExecutionDetails.stepExecution.stepExecution.name }}</strong>
        ({{ stepExecutionDetails.stepExecution.stepExecution.id }})
      </h1>
      <h2>
        Job execution <strong>{{ stepExecutionDetails.jobExecution.name }}</strong>
        ({{ stepExecutionDetails.jobExecution.jobExecutionId }})
      </h2>
    </div>
    <div class="actions">
      <button id="refresh" class="btn btn-default" (click)="refresh()">
        <span class="glyphicon glyphicon-refresh"></span>
      </button>
    </div>
  </div>

  <hr>

  <div *ngIf="stepExecutionDetails.stepExecutionProgress.percentageComplete < 1">
    <h4>Percentage Complete</h4>
    <progressbar [animate]="false" max="100" [value]="stepExecutionDetails.percentageComplete" type="success">
      <b>{{ stepExecutionDetails.percentageComplete }}%</b>
    </progressbar>
  </div>

  <div>

    <h4>Step Execution History</h4>

    <table id="stepExecutionProgress" *ngIf="stepExecutionDetails.stepExecutionProgress?.stepExecutionHistory"
           class="table table-hover">
      <thead>
      <tr>
        <th style="width: 250px">Name</th>
        <th>Count</th>
        <th>Min</th>
        <th>Max</th>
        <th>Mean</th>
        <th>Standard Deviation</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Commit Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Duration</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Duration per Read</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Filter Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Process Skip Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.standardDeviation }}
        </td>
      </tr>
      <tr>
        <td>Read Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Read Skip Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Rollback Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Write Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.standardDeviation }}</td>
      </tr>
      <tr>
        <td>Write Skip Count</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.count }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.min }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.max }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.mean }}</td>
        <td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.standardDeviation }}</td>
      </tr>
      </tbody>
    </table>
  </div>

  <div style="text-align: center;padding-top: 10px;">
    <button id="back" class="btn btn-default" (click)="back()">Back</button>
  </div>

</div>

<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
